<template>
  <div class="container">
    <van-card
      :title="comment.aut_name"
      num="2"
    >
      <template #thumb>
        <van-image
          :src="comment.aut_photo"
          fit="cover"
          height="35px"
          round
          width="35px"
        />
      </template>
      <template #desc>
        <div class="content">{{comment.content}}</div>
      </template>
      <template #price>
        <div class="solt_price">
          {{comment.pubdate | relativeTime}}
          <van-button
            @click="showReplyPop"
            size="mini"
            type="default"
          >回复{{comment.reply_count}}</van-button>
        </div>
      </template>
      <template #num>
        <van-icon
          :color="comment.is_liking ? '#e5645f' : ''"
          :name="comment.is_liking ? 'good-job' : 'good-job-o'"
          @click="zanCalzanComment"
        />
      </template>
    </van-card>
    <van-popup
      :style="{ height: '90%' }"
      closeable
      position="bottom"
      v-model="show"
    >
      <div class="reply_title top_title">{{comment.reply_count}}条回复</div>

      <van-list
        :finished="finished"
        @load="onLoad"
        finished-text="已展示所有评论"
        v-model="loading"
      >
        <van-card
          :title="comment.aut_name"
          num="2"
        >
          <template #thumb>
            <van-image
              :src="comment.aut_photo"
              fit="cover"
              height="35px"
              round
              width="35px"
            />
          </template>
          <template #desc>
            <div class="content">{{comment.content}}</div>
          </template>
          <template #price>
            <div class="solt_price">{{comment.pubdate | relativeTime}}</div>
          </template>
          <template #num>
            <van-icon
              :color="comment.is_liking ? '#e5645f' : ''"
              :name="comment.is_liking ? 'good-job' : 'good-job-o'"
              @click="zanCalzanComment"
            />
          </template>
        </van-card>
        <div class="reply_title">全部回复</div>
        <van-card
          :key="index"
          :title="item.aut_name"
          num="2"
          v-for="(item,index) in commentList"
        >
          <template #thumb>
            <van-image
              :src="item.aut_photo"
              fit="cover"
              height="35px"
              round
              width="35px"
            />
          </template>
          <template #desc>
            <div class="content">{{item.content}}</div>
          </template>
          <template #price>
            <div class="solt_price">
              {{item.pubdate | relativeTime}}
              <van-button
                @click="showPubCom(item.com_id)"
                size="mini"
                type="default"
              >回复{{item.reply_count}}</van-button>
            </div>
          </template>
          <template #num>
            <van-icon
              :color="item.is_liking ? '#e5645f' : ''"
              :name="item.is_liking ? 'good-job' : 'good-job-o'"
              @click="zanCalzanReply(index,item.is_liking, item.com_id)"
            />
          </template>
        </van-card>
      </van-list>
      <div class="footer">
        <van-button
          round
          size="normal"
          type="default"
          @click="showPubCom(comment.com_id)"
        >回复</van-button>
      </div>
      <publish-comment type="reply" ref="pubCom" />
    </van-popup>
  </div>
</template>

<script>
import {
  addCommentLike,
  deleteCommentLike,
  getComments
} from "../../../../network/article";
import PublishComment from "../../../../components/publish-comment/publish-comment";

export default {
  name: "CommentItem",
  props: ["comment"],
  components: { PublishComment },
  computed: {},
  data() {
    return {
      show: false,
      finished: false,
      loading: false,
      offset: null,
      commentList: [],
      showPublisgComment: false
    };
  },
  created() {
    this.$bus.$on('addReply',res => {
      this.commentList.unshift(res)
      this.comment.reply_count++
    })
  },
  mounted() {},
  methods: {
    async zanCalzanComment() {
      if (this.comment.is_liking) {
        //取消赞
        const result = await deleteCommentLike(this.comment.com_id);
        if (result.data === "") {
          this.comment.is_liking = false;
        }
      } else {
        //赞👍
        const result = await addCommentLike(this.comment.com_id);
        if (result.message === "OK") {
          this.comment.is_liking = true;
        }
      }
    },
    showReplyPop() {
      this.show = true;
      console.log("点击");
    },
    async onLoad() {
      //获取回复
      const result = await getComments({
        type: "c", // 评论类型，a-对文章(article)的评论，c-对评论(comment)的回复
        source: this.comment.com_id.toString(), // 源id，文章id或评论id
        offset: this.offset, // 获取评论数据的偏移量，值为评论id，表示从此id的数据向后取，不传表示从第一页开始读取数据
        limit: 10 // 每页大小
      });
      console.log(result);
      if (result.message === "OK") {
        this.commentList = [...this.commentList, ...result.data.results];
        this.loading = false;
        if (result.data.results.length) {
          this.offset = result.data.last_id;
        } else {
          this.finished = true;
        }
      } else {
        console.log("获取文章评论失败");
        this.finished = true;
      }
    },
    //对回复点赞或取消
    async zanCalzanReply(index, isIlke, comId) {
      if (isIlke) {
        //取消赞
        const result = await deleteCommentLike(comId);
        console.log(result);
        if (result.data === "") {
          this.commentList[index].is_liking = false;
        }
      } else {
        //赞👍
        const result = await addCommentLike(comId);
        console.log(result);
        if (result.message === "OK") {
          this.commentList[index].is_liking = true;
        }
      }
    },
    showPubCom(id) {
      console.log("店家");
      this.$refs.pubCom.isShow(id);
    }
  }
};
</script>

<style scoped lang="stylus" >
.van-card
  padding 0
  margin-bottom 10px

  .van-card__thumb
    width 40px
    margin 0
    display flex
    // padding-top 20px

.van-card__content
  justify-content space-around

.content
  padding-top 15px
  color #363636
  font-size 13px

.van-card__bottom
  display flex
  align-items center
  justify-content space-between

.van-card__title
  color #46689d
  font-size 13px
  font-weight bold

.solt_price
  font-size 10px
  color #999

.van-button
  margin-left 5px
  font-size 10px
  color #999
  min-width 38px
  height 20px

/deep/ .van-popup__close-icon--top-right
  color #3196fa
  right 5px
  top 10px

.reply_title
  font-size 16px
  color #323233
  text-align center
  line-height 45px

.van-popup
  padding 0 10px
  box-sizing border-box

.footer
  position fixed
  height 44px
  bottom 0
  left 0
  right 0
  border-top 1px solid #eee
  display flex
  align-items center
  justify-content center
  background-color #fff
  .van-button
    width 50%
    height 80%
</style>